<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">

    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/mouseEventInform.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/click.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"/>
    <title>Three</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type"/>
    <meta http-equiv="Cache-Control" content="max-age=0"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<header th:fragment="header">
    <div id="Header">

        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/view"><img src="../images/logo-topbar.gif"/></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <!--购物车-->
                <a href="/catalog/viewCart"><img align="middle" name="img_cart" src="../images/cart.gif"/></a>
                <img align="middle" src="../images/separator.gif"/>
                <span th:if="${account == null}">
                    <a href="/account/signonForm">Sign In</a>
                </span>
                <span th:if="${account != null}">
                    <a href="/account/signout">Sign Out</a>
                </span>

                <span th:if="${account != null}">
                    <img align="middle" src="../images/separator.gif"/>
                    <a href="/account/editForm">My Account</a>
                </span>

                <img align="middle" src="../images/separator.gif"/>
                <a href="/common/help">Help</a>
                <img align="middle" src="../images/separator.gif"/>
                <a href="/houtai/test">BMS</a>
            </div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <!--搜索栏目-->

                <form action="searchProducts" method="post">
                    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
                    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
                    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
                    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
                    <script>
                        $(function () {
                            var availableTags = [
                                "Amazon Parrot",
                                "Finch",
                                "Koi",
                                "Goldfish",
                                "Angelfish",
                                "Tiger Shark",
                                "Persian",
                                "Manx",
                                "Bulldog",
                                "Chihuahua",
                                "Dalmation",
                                "Poodle",
                                "Golden Retriever",
                                "Labrador Retriever",
                                "Iguana",
                                "Rattlesnake"
                            ];
                            $("#keyword").autocomplete({
                                source: availableTags
                            });
                        });
                    </script>
                    <div class="ui-widget">
                        <input type="text" id="keyword" name="keyword" size="14" placeholder="请输入关键词"/>
                        <input type="submit" name="searchProducts" value="Search"/>
                    </div>

                </form>

            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/viewCategory?categoryId=FISH"><img src="../images/sm_fish.gif"/></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=DOGS"><img src="../images/sm_dogs.gif"/></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="../images/sm_reptiles.gif"/></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=CATS"><img src="../images/sm_cats.gif"/></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="../images/sm_birds.gif"/></a>
        </div>

    </div>
</header>
